<template>
  <div class="detail_box">
    <div class="breadcrumb">
      <div>当前位置：</div>
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ path: '/' }">源码网</el-breadcrumb-item>
        <el-breadcrumb-item>详情页</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="detail_content">
      <div class="l-item">
        <div class="descript">
          {{ detail.descript }}
        </div>
        <div class="tag_list">
          <el-tag v-for="(tag, tagInd) in detail.tags" :key="tagInd" type="warning">{{ tag }}</el-tag>
        </div>
        <div class="img_box">
          <!-- <img v-for="(img, index) in detail.imgList" :src="img" alt="" :key="index"> -->
          <div class="img_item1" v-for="(img, index) in detail.imgList" :key="index" style="height: 700px;">
            <el-image
              style="height: 100%;"
              :src="img"
              :zoom-rate="1.2"
              :max-scale="7"
              :min-scale="0.2"
              :preview-src-list="detail.imgList"
              show-progress
              :initial-index="index"
              fit="cover"
             ></el-image>
          </div> 
        </div>
      </div>
      <div class="r-item">
        <div class="item_1">
          <el-botton class="get_btn">立即获取</el-botton>
          <div class="start">
            <el-icon><StarFilled /></el-icon>
          </div>
        </div>
        <div class="detail_table">
          <div class="detail_item">
            <div>作品编号：</div>
            <div>{{ detail.id }}</div>
          </div>
          <div class="detail_item">
            <div>作品分类：</div>
            <div>
              <el-tag v-for="(tag, tagInd) in detail.tags" :key="tagInd" type="warning">{{ tag }}</el-tag>
            </div>
          </div>
          <div class="detail_item">
            <div>作品描述：</div>
            <div>
              {{ detail.descript }}
            </div>
          </div>
          <div class="detail_item">
            <div>作品大小：</div>
            <div>
              {{ detail.size }} KB
            </div>
          </div>
          <div class="detail_item">
            <div>存储类型：</div>
            <div>
              {{ detail.saveType }}
            </div>
          </div>
           <div class="detail_item">
            <div>版本信息：</div>
            <div>
              {{ detail.versions }}
            </div>
          </div>
          <div class="detail_item">
            <div>作品价格：</div>
            <div>￥<span>{{ detail.price }}</span></div>
          </div>
        </div>
      </div>
    </div>
    <div class="descript_box">
      <div>
        使用声明：本产品为个人开发分享，内部字体图片均来源于网络； 仅用于参考开发；禁止滥用，商用，以及用于从事违法活动；如有任何疑问，请联系客服为您处理；
      </div>
      <div>
        客服电话：123123123
      </div>
      <div>
        客服QQ: 123123123
      </div>
    </div>
  </div>
</template>
<script setup>
import { ArrowRight } from '@element-plus/icons-vue';
import { pageList } from '../../MockData';
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { StarFilled } from '@element-plus/icons-vue';

const detail = ref({});
const route = useRoute();


onMounted(() => {
  detail.value = pageList.find(item => {
    return item.id == route.params.id;
  })
})
</script>
<style scoped lang="scss">
.detail_box {
  width: 90%;
  margin: 0 auto;
  .breadcrumb {
    display: flex;
    align-items: center;
    line-height: 70px;
    height: 70px;
  }
  .detail_content {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: start;
    .l-item {
      box-shadow: 0 11px 21px #d4d8e4;
      background: #f6f7fa;
      border-radius: 20px;
      padding: 10px 50px 50px 50px;
      box-sizing: border-box;
      width: 70%;
      .descript {
        margin-bottom: 20px;
      }
      .tag_list {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
      }
      .img_box {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        .img_item1 {
          flex-shrink: 0;
          box-shadow: 0 11px 21px #d4d8e4;
          border-radius: 10px;
          overflow: hidden;
          padding: 10px;
        }
      }
      // img {
      //   width: 100%;
      //   margin: 10px auto;
      // }
    }
    .r-item {
      box-shadow: 0 11px 21px #d4d8e4;
      background: #f6f7fa;
      border-radius: 20px;
      width: 28%;
      flex-shrink: 0;
      .item_1 {
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
        .get_btn {
          box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
          background: linear-gradient(270deg, #ffae12, #f07d17);
          width: 240px;
          height: 60px;
          color: #fff;
          font-size: 24px;
          text-align: center;
          line-height: 60px;
          display: inline-block;
          border-radius: 100px;
        }
        .start {
          font-size: 40px;
          height: 55px;
          width: 55px;
          border: 1px solid #ccc;
          border-radius: 100px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #a5a5a5;
        }
      }
      .detail_table {
        font-size: 14px;
        color: #666;
        padding: 10px 20px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        padding-bottom: 40px;
        .detail_item {
          display: flex;
          div:first-child {
            width: 70px;
            flex-shrink: 0;
          }
        }
      }
    }
  }
  .descript_box {
    margin: 20px  0 0 20px;
    border-top: 1px solid #ccc;
    padding-top: 20px;
    font-size: 16px;
    color: #666;
    width: 70%;
    div {
      margin-bottom: 10px;
    }
  }
}

</style>